<template>
  <div>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;padding-bottom: 0px;
    display: flex;justify-content: space-between">
      <el-form :inline="true">
        <el-form-item prop="userId">
          <el-input
            v-model="conversion.uid"
            :placeholder="$t('iptdefault.uid')"
          ></el-input>
        </el-form-item>

           <el-form-item :label="$t('iptdefault.timeselect')">
            <el-col :span="11">
              <el-date-picker type="date" :placeholder="$t('iptdefault.starttime')" v-model="conversion.start" style="width: 100%;"></el-date-picker>
            </el-col>
          
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" :placeholder="$t('iptdefault.endtime')" v-model="conversion.end" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getUserDealSubmit">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>

           <el-form-item>
          <el-button type="primary" @click="getUserDealRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

      
      <el-form :inline="true" style="display:flex;align-item:center;">
        <el-form-item>
          <el-button type="primary" @click="exportexcel">{{$t('publicbtn.exportalldata')}}</el-button>
        </el-form-item> 
       <excelexport></excelexport>
      </el-form>
      

    </el-col>

    <el-table
      v-loading="loading"
      :data="userDealRecordList"
      style="width: 100%"
      id="out-table"
    >
      <el-table-column prop="userId" :label="$t('field.userid')"></el-table-column>
      <el-table-column prop="username" :label="$t('field.cellphone')"></el-table-column>
      <el-table-column prop="name" :label="$t('field.upusername')"></el-table-column>

      <el-table-column prop="scrypto" :label="$t('exchange.yuancoin')"> </el-table-column>
      <el-table-column prop="tcrypto" :label="$t('exchange.targetcurrency')"> </el-table-column>
      <el-table-column prop="fee"  :label="$t('exchange.servicecharge')"></el-table-column>

        <el-table-column :label="$t('exchange.sourceprice')">
          <template slot-scope="props">
          {{
            props.row.sprice.toFixed(8)
          }}
        </template>
      </el-table-column>

        <el-table-column :label="$t('exchange.targetprice')">
          <template slot-scope="props">
          {{
            props.row.tprice.toFixed(8)
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('exchange.conversionprice')">
          <template slot-scope="props">
          {{
          props.row.scrypto == 'SHIB'? parseFloat(c(props.row.price)).toFixed(12):parseFloat(props.row.price).toFixed(8)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="snum" :label="$t('exchange.sourcecurrency')">
         <template slot-scope="props">
          {{
            (props.row.snum/calculate).toFixed(8)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="tnum" :label="$t('exchange.targetcoins')">
        <template slot-scope="props">
          {{
            (props.row.tnum/calculate).toFixed(8)
          }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('field.status')">
		     <template slot-scope="props">
          {{
            props.row.status == 0 ? $t('exchange.fail') : props.row.status == 1 ?  $t('exchange.success')  : ""
          }}
        </template>
	  </el-table-column>
      <el-table-column prop="referral" :label="$t('field.recommenderId')"></el-table-column>


      <el-table-column prop="createdAt" :label="$t('exchange.conversiontime')"></el-table-column>
      <el-table-column prop="updateAt" :label="$t('exchange.updatetime')"></el-table-column>
    </el-table>
    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pagetotal"
        :page-size='conversion.size'
        @current-change="current_change"
        :current-page="uidStartEen.page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import excelexport from '@/components/export.vue'
import exportData from "@/components/export.js";

import { getUserRequest } from "@/api/api";
export default {
  components: {
            excelexport,
        },
  data() {
    return {
      calculate:100000000,
	    pagetotal:null,
      loading: false,
      conversion: {
      start:'',
      end:'',
      uid: '',
      page:1,
		  size:10
      },
      uidStartEen:{
      start:'',
      end:'',
      uid: '',
      page:1,
		  size:10
      },
      userDealRecordList: [],
    };
  },
    
  computed:{
      tableData:function(){
    return [[
      this.$t('field.userid'),this.$t('field.cellphone'),this.$t('field.upusername'),this.$t('exchange.yuancoin'),this.$t('exchange.targetcurrency'),this.$t('exchange.servicecharge'),this.$t('exchange.sourceprice'),this.$t('exchange.targetprice'),this.$t('exchange.conversionprice'),this.$t('exchange.sourcecurrency'),this.$t('exchange.targetcoins'),this.$t('field.status'),this.$t('field.recommenderId'),this.$t('exchange.conversiontime'),this.$t('exchange.updatetime')]]

      }},
  methods: {
    
// 科学计数法转化数组
     c(param) {
            let strParam = String(param)
            let flag = /e/.test(strParam)
            if (!flag) return param
            // 指数符号 true: 正，false: 负
            let sysbol = true
            if (/e-/.test(strParam)) {
              sysbol = false
            }
            // 指数
            let index = Number(strParam.match(/\d+$/)[0])
            // 基数
            let basis = strParam.match(/^[\d\.]+/)[0].replace(/\./, '')
            if (sysbol) {
              return basis.padEnd(index + 1, 0)
            } else {
              return basis.padStart(index + basis.length, 0).replace(/^0/, '0.')
            }
      },
    // 获取
    getUserDeallist() {
      this.loading=true,
		getUserRequest(this.uidStartEen,'/getExchangeRecord').then((res)=>{
			var data = res.data
			if(data.code==200){
			this.userDealRecordList = data.data.list
			this.pagetotal = data.data.total
			}else{
				this.$message({
				message: data.message,
				type: "error"
				})
			}
      this.loading=false
		})
	},
    // 查询
    getUserDealSubmit() {
      this.conversion.page=1
      this.uidStartEen=JSON.parse(JSON.stringify(this.conversion))
      if(this.uidStartEen.start) this.uidStartEen.start = (new Date(this.conversion.start)).getTime();
      if(this.uidStartEen.end) this.uidStartEen.end = (new Date(this.conversion.end)).getTime();
      this.getUserDeallist()
	},
    // 分页
    current_change(pager) {
      this.uidStartEen.page=pager
      this.getUserDeallist()
    },
    // 刷新
    getUserDealRefresh(){
      this.uidStartEen.page=1
      this.getUserDeallist()
    },
    exportexcel(){
    let tableDatatilte = ['userId','username','name','scrypto','tcrypto','fee','sprice','tprice','price','snum','tnum','status','referral','createdAt','updateAt']
    let tableData=this.tableData
    //  [['用户ID','手机号','用户名称','源币','目标货币','手续费','源价','目标价','转换价格','源币的数量','目标币的数量','状态','转换时间','更新时间']]
    let dataMsg =  {start:'',end:'',uid:this.conversion.uid,page:1,size:this.calculate}
        dataMsg.start = JSON.parse(JSON.stringify(this.conversion.start))
        dataMsg.end = JSON.parse(JSON.stringify(this.conversion.end))
    if(dataMsg.start&&dataMsg.end){
      let _this = this
        if(dataMsg.start !='') dataMsg.start = (new Date(dataMsg.start)).getTime();
        if(dataMsg.end !='') dataMsg.end = (new Date(dataMsg.end)).getTime();
      getUserRequest(dataMsg,'/getExchangeRecord').then((res)=>{
            var datalist = res.data.data.list
            for (let i = 0; i < datalist.length; i++) {
              if( datalist[i]['status'] == 1){
                datalist[i]['status'] =  this.$t('exchange.success')
              }else if( datalist[i]['status'] == 0){
                datalist[i]['status'] = this.$t('exchange.fail')
              }
              
                datalist[i]['price'] = datalist[i]['scrypto'] == 'SHIB'?parseFloat( _this.c(datalist[i]['price'])).toFixed(12):parseFloat(datalist[i]['price']).toFixed(8)
                datalist[i]['snum'] = (datalist[i]['snum'] / _this.calculate).toFixed(8)
                datalist[i]['tnum'] = (datalist[i]['tnum'] / _this.calculate).toFixed(8)
                datalist[i]['sprice'] = datalist[i]['sprice'].toFixed(8)
                datalist[i]['tprice'] = datalist[i]['tprice'].toFixed(8)
            }
            
            let exportName = this.$t('export.exchangeName')
              exportData.exportTable(datalist,tableData,tableDatatilte,exportName)
            })
    }else{
      this.$message({
        message:this.$t('bulletframe.selecttime'),
        type: "error",
      });
    }
    }



  },
  created(){
	  this.getUserDeallist()
  }
};
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>